<template>
    <div class="bond">
        <div class="page_title">
            <img src="~/assets/images/service/bond_icon.png" alt="">
            保证金管理
        </div>

        <div class="info">
            <div class="info_con">
                <div class="text">
                    <div class="label">保证金金额</div>
                    <div class="moeny">
                        {{ userInfo && userInfo.service_info.cash_deposit != 0 ? userInfo.service_info.cash_deposit :
                            '0.00' }}
                        <span>元</span>
                    </div>
                </div>
                <el-button size="small" type="primary" @click="dialogVisible = true">{{ userInfo &&
                    userInfo.service_info.cash_deposit != 0 ? '追缴' : '缴纳' }}保证金</el-button>
                <el-button size="small" type="primary" plain @click="dialogVisible2 = true">退还保证金</el-button>
            </div>
            <div class="info_tips">
                <i class="el-icon-warning"></i>保证金注意事项: <br>
                1、缴纳保证金后，店铺会有保证金标识，这在一定程度上增加了买家的信任度。 <br>
                2、返还保证金时需店铺无正在进行中订单，申请返还后7个工作日到账。
            </div>
        </div>

        <div class="page_title">
            <img src="~/assets/images/service/bond_icon2.png" alt="">
            保证金明细
        </div>

        <div class="list">
            <div class="th">
                <div style="width: 100%;text-align: left;">类型</div>
                <div style="min-width: 190px;">金额</div>
                <div style="min-width: 290px;">编号</div>
                <div style="min-width: 150px;">时间</div>
            </div>
            <div v-for="(item, index) in bondList" :key="index" class="td">
                <div style="width: 100%;text-align: left;">{{ item.remark }}</div>
                <div style="min-width: 190px;">{{ item.type == 1 ? '+' : '-' }} ￥{{ item.money }}</div>
                <div style="min-width: 290px;">{{ item.order_sn }}</div>
                <div style="min-width: 150px;">{{ item.createtime_text && item.createtime_text.slice(0, -3) }}</div>
            </div>
            <div v-if="bondList.length == 0" class="no_data">
                - 暂无记录 -
            </div>
        </div>


        <el-dialog title="缴纳保证金" :visible.sync="dialogVisible" width="795px" custom-class="bond_dialog1">
            <div class="dialog1">
                <div class="label">缴纳保证金</div>
                <div class="radio">
                    <el-radio v-model="radio" class="radio_item" label="500">500元（个人服务商推荐）</el-radio>
                    <el-radio v-model="radio" class="radio_item" label="1000">1000元（企业服务商推荐）</el-radio>
                    <el-radio v-model="radio" class="radio_item" label="diy">
                        自定义额度<el-input-number size="mini" v-model="moeny" :controls="false"></el-input-number>元
                    </el-radio>
                </div>
                <el-button size="small" type="primary" @click="payBond">确定选择</el-button>
            </div>
        </el-dialog>

        <el-dialog title="退还保证金" :visible.sync="dialogVisible2" width="795px" custom-class="bond_dialog2">
            <div class="dialog2">
                <div class="t1">
                    保证金金额：<span> {{ userInfo && userInfo.service_info.cash_deposit }}元</span>
                </div>
                <div class="t2">提现信息</div>
                <div class="t3">
                    收款人：
                    <el-input v-model="recipient_name" style="width: 95px;" placeholder="请输入"></el-input>
                    收款人卡号：
                    <el-input v-model="recipient_account" style="width: 235px;" placeholder="请输入"></el-input>
                    银行开户行：
                    <el-input v-model="bank" style="width: 146px;" placeholder="请输入"></el-input>
                </div>
                <div style="text-align: right;">
                    <button class="d2s" @click="noPayBond">确定退还</button>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="" :visible.sync="PayShow" width="300px" custom-class="pay_code_dialog">
            <div style="text-align: center;font-size: 18px;padding: 0 0 20px;font-weight: 600;color: #000;">扫码支付</div>
            <div style="display: flex;justify-content: center;">
                <vue-qr ref="qrCode" :text="payCode" color-dark="black" :margin="0" width="250px"
                    height="250px"></vue-qr>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    set_cashdeposit,
    pc_service_cashdeposit,
    get_cashdeposit,
    cashdeposit_detail
} from "@/assets/api/service";
import { getTime } from "@/assets/utils/utils";
import { mapState, mapActions } from "vuex"
export default {
    name: "bond",
    components: {},
    data() {
        return {
            dialogVisible: false,
            dialogVisible2: false,
            radio: '500',
            moeny: 0,
            recipient_name: '',
            recipient_account: '',
            bank: '',


            bondList: [],


            PayShow: false, //支付弹窗
            payCode: '',
        };
    },
    beforeDestroy() { },
    beforeMount() {
        this.$options.components["vue-qr"] = () => import("vue-qr");
    },
    created() {

    },
    mounted() {
        this.get_cashdeposit()
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    methods: {
        ...mapActions("common", ["getUserInfo"]),
        async get_cashdeposit() {
            const res = await get_cashdeposit({})
            if (res.code == 1) {
                this.bondList = res.data
            }
        },

        async noPayBond() {
            if (this.userInfo.service_info.cash_deposit == 0) return
            const res = await set_cashdeposit({
                service_id: this.userInfo.service_info.id + '',
                type: '2',
                money: this.userInfo.service_info.cash_deposit + '',
                recipient_name: this.recipient_name,
                recipient_account: this.recipient_account,
                bank: this.bank,
            })
            if (res.code == 1) {
                this.dialogVisible2 = false
                this.getUserInfo()
                this.get_cashdeposit()
                this.$alert('这里缺个提示词', '提示', {
                    confirmButtonText: '确定',
                    callback: action => { }
                });
            }
        },

        async payBond() {
            let money = 0
            if (this.radio == 'diy') {
                money = this.moeny
            }
            else {
                money = Number(this.radio)
            }
            if (money == 0) {

                return
            }
            const res = await set_cashdeposit({
                service_id: this.userInfo.service_info.id + '',
                type: '1',
                money: money + ''
            })
            if (res.code == 1) {
                this.pc_service_cashdeposit(res.data)

            }
        },

        async pc_service_cashdeposit(data) {
            const res = await pc_service_cashdeposit({
                money: data.pay_money,
                combo_id: data.id,
                order_sn: data.order_sn
            })
            if (res.code == 1) {
                this.payCode = res.data
                this.PayShow = true;
                // 启动轮询
                this.lunxunOrder(data.id)
            }
        },

        async lunxunOrder(id) {
            if (!this.PayShow) return
            const res = await cashdeposit_detail({
                id: id,
            })
            if (res.code == 1 && res.data.pay_time) {
                this.PayShow = false;
                this.dialogVisible = false
                this.getUserInfo()
                this.get_cashdeposit()

                this.$alert('支付成功', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            } else {
                setTimeout(() => {
                    this.lunxunOrder(id)
                }, 1500)
            }
        },


    },
};
</script>

<style lang="scss">
.bond_dialog1 {
    background: linear-gradient(180deg, #D9ECFF 4%, #FFFFFF 99%);

    .el-dialog__title {
        font-size: 21px;
        color: #000000;
    }

    .el-dialog__header {
        text-align: center;
        border-bottom: 1px solid #FFFFFF;
    }
}

.bond_dialog2 {
    background: linear-gradient(180deg, #FFEED9 4%, #FFFFFF 99%);

    .el-dialog__title {
        font-size: 21px;
        color: #000000;
    }

    .el-dialog__header {

        text-align: center;
        border-bottom: 1px solid #FFFFFF;
    }
}
</style>
<style lang="scss" scoped>
.page_title {
    font-size: 18px;
    color: #1B8DFF;
    display: flex;
    align-items: center;

    img {
        width: 22px;
        height: auto;
        margin-right: 7px;
    }
}

.info {
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 16px;
    margin-bottom: 25px;
    overflow: hidden;

    .info_con {
        padding: 17px 20px;
        display: flex;
        align-items: center;

        .text {
            width: 100%;

            .label {
                font-size: 16px;
                color: #000B1A;
            }

            .moeny {
                font-size: 28px;
                color: #000B1A;
                margin-top: 6px;

                span {
                    font-size: 16px;
                }
            }
        }
    }

    .info_tips {
        background: #F7F8FA;
        border-radius: 10px;
        padding: 14px 20px;
        font-size: 16px;
        color: #000B1A;
        line-height: 26px;

        i {
            color: #1B8DFF;
            font-size: 18px;
            padding-right: 6px;
        }
    }
}

.list {
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 18px;

    .th,
    .td {
        display: flex;
        align-items: center;
        padding: 0 20px 0 24px;
        height: 60px;
        line-height: 60px;

    }

    .th {
        background: #F7F8FA;
        text-align: center;
    }

    .td {
        text-align: center;
        background: #FFFFFF;
        border-bottom: 1px solid #EBEBEB;
    }

    .no_data {
        text-align: center;
        background: #FFFFFF;
        padding: 15px 0;
        font-size: 14px;
        color: rgb(94, 109, 130);
    }
}

.dialog1 {
    display: flex;
    align-items: center;
    padding: 0 13PX;

    .label {
        font-size: 14px;
        color: #000000;
        margin-right: 38px;
        white-space: nowrap;
    }

    .radio {
        width: 100%;

        .radio_item {
            display: block;
            height: 28px;
        }

        .radio_active {
            color: #1B8DFF;
        }

        &::v-deep .el-input-number--mini {
            width: 90px;
            margin: 0 6px;
        }
    }
}

.dialog2 {
    padding: 0 13PX;

    .t1 {
        font-weight: 400;
        font-size: 14px;
        color: #000000;

        span {
            font-size: 18px;
        }
    }

    .t2 {
        margin: 12px 0;
        font-size: 16px;
        color: #000B1A;
    }

    .t3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        font-size: 14px;
        color: #000B1A;
    }

    .d2s {
        margin-top: 30px;
        width: 94px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: #FF821B;
        border-radius: 5px;
        font-size: 12px;
        color: #FFFFFF;
        border: none;
        cursor: pointer;

        &:hover {
            opacity: 0.95;
        }

        &:active {
            opacity: 0.85;
        }
    }
}
</style>